<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>欢迎光临vue开发的收银系统 水果店</p>
        <h5>苹果10￥/斤，折扣<8折>
        </h5>
        请输入你要购买的斤数
        <input type="text" v-model="num">
        <button @click="fuck">结账买单~</button>
        <p>结账单：<span>总价：{{total}}￥元</span><span>折后价：{{newP}}￥元</span><span>省了：{{save}}￥元</span></p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            num: 0,
            total: 0,
            newP: 0,
            save: 0
        },
        methods: {
            fuck() {
                this.total = this.num * 10
                this.newP = this.total * 0.8
                this.save = this.total - this.newP
            }
        },
        // computed: {
        //     total() {
        //         return 10 * this.num
        //     },
        //     newP() {
        //         return this.total * 0.8
        //     },
        //     save() {
        //         return this.total - this.newP
        //     }
        // }
    })
</script>

</html>